<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch" :immediate="false" :disabledOption="['week', 'year', 'hisYear', 'custom']"
      :chooseMaxDate="chooseMaxDate">
    </CommonDateSearch>
    <div class="content-box">
      <!-- <a-tabs v-model:activeKey="currentTab" @change="getData">
        <a-tab-pane v-for="item in tabData" :key="item.classifyId" :tab="item.label"></a-tab-pane>
      </a-tabs> -->
      <div class="titletooltip">
        <a-radio-group v-model:value="currentTab" button-style="solid" @change="getData">
          <a-radio-button v-for="item in tabData" :key="item.itemCode" :value="item.itemCode">{{ item.itemName
          }}</a-radio-button>
        </a-radio-group>
        <div>说明: 过滤占比小于0.5%的设备</div>
      </div>
      <!-- <Mind v-loading="loadingRef" ref="graphRef"></Mind> -->
      <Sankey :sankeyData="sankeyData" />
      <a-empty class="empty" v-if="emptyRef" :image="simpleImage" />
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page'
import { ref, onMounted, reactive } from 'vue'
import { getTreeEnergyData } from '@/api/treeEnergy'
import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
import { getDictListByCode } from '@/api/sys/dict'
// import Mind from './mind.vue'
import { Empty } from 'ant-design-vue';
import dayjs from 'dayjs'
import Sankey from './sankey.vue';

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const emptyRef = ref(false)

const tabData = ref([{ itemCode: '1840266799313063936', itemName: '电' }])

const searchRef = ref()
const searchInfo = ref()
const currentTab = ref()
const loadingRef = ref(false)
const sankeyData = ref()
// const graphRef = ref()

const chooseMaxDate = {
  day: dayjs().subtract(1, 'day').endOf('day'),
  month: dayjs().subtract(1, 'month').endOf('month'),
}

onMounted(async () => {
  getDictListByCode('energy_flow').then((res) => {
    tabData.value = res
    currentTab.value = res[0].itemCode
    searchRef.value.handleSearch()
  })
  
})

const handleSearch = (params) => {
  searchInfo.value = params


  // currentTab = tabData[0].classifyId
  // initGraph()
  getData()
}

const getData = async () => {
  loadingRef.value = true
  getTreeEnergyData({ ...searchInfo.value, classifyId: currentTab.value }).then(res => {
    // graphRef.value.initGraph(res)
    sankeyData.value = res
    const errorData = !res || res.length === 0
    emptyRef.value = errorData
  }).catch(() => {
    // graphRef.value.initGraph([])
    emptyRef.value = true
  }).finally(() => {
    loadingRef.value = false
  })
}

</script>
<style lang="less" scoped>
.content-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
  background: #fff;

  .tab {
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }

  .titletooltip {
    display: flex;
    justify-content: space-between;
  }

  .tab-content {
    flex: 1;
    overflow: hidden;
  }

  :deep(.ant-tabs-nav) {
    margin-bottom: 8px;
  }

  :deep(.empty) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
